import { useEffect, useState } from "react";
import { Search, ProductCard } from "react-vant";
import axios from "axios";
import "./index.css";


const Index: React.FC = () => {
  const [list, setList] = useState([]);
  const [value, setValue] = useState("");
  let [jl, setJl] = useState<any>([]);

  useEffect(() => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  }, []);

  // 按回车执行
  const ss = (val: any) => {
    setValue(val);
    axios.get("/api/search", { params: { val } }).then((resp) => {
      setList(resp.data.items);
    });
    jl.push(val);
  };
  const qc = () => {
    setJl([]);
  };

  return (
    <div>
      <Search
        value={value}
        onChange={setValue}
        placeholder="请输入搜索关键词"
        showAction
        onSearch={(val: any) => ss(val)}
      />
      <div>
        <button onClick={() => qc()}>清除历史记录</button>
        历史记录:
        {jl.length > 0 && jl.map((v: any, i: any) => <span key={i}>{v}</span>)}
      </div>
      {list.length > 0 &&
        list.map((v: any, i: any) => (
          <div key={i}>
            <ProductCard
              price={v.price}
              desc={v.word}
              title={v.title}
              thumb={v.img}
            />
          </div>
        ))}
    </div>
  );
};
export default Index;
